<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专业的网上购物平台-手机京东</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta name="keywords" content="网上购物,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,在线销售家电、数码、电脑、服装、母婴、图书">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    
    
    
</head>
<body>
<div id="jd_app" class="jd_layout">
    <!--头部-->
    <div class="jd_header">
        <div class="jd_header_box">
            <a href="" class="icon_logo"></a>
            <form action="">
                <span class="icon_search" style="background-image: url('images/')"></span>
                <!--移动端唤起键盘时，右下角的按钮显示为搜索-->
                <input type="search" placeholder="搜索京东商品\店铺">
            </form>
            <a href="" class="jd_login">登录</a>
        </div>
    </div>
    <!--焦点图-->
    <div class="jd_banner">
        <ul class="clearfix">
            <li><a href=""><img src="images/l8.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l1.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l3.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l4.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l5.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l6.jpg" alt=""></a></li>
            <li><a href=""><img src="images/l7.jpg" alt=""></a></li>
        </ul>
        <ol class="clearfix">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--导航--><!--图片显示找不到路径bug-->
    <div class="jd_nav">
        <my-nav class="jd_nav_content" v-for = "(obj,index) in navListArr" imgs = "obj.img"  v-bind:titles = "obj.title"></my-nav>
    </div>
    <!--产品中心-->
    <div class="jd_product" style="vertical-align: middle" >
        <my-product v-for = "(obj,index) in productListArr" :src="obj.img" >
            <img src=src alt="">
            <img src=value.img alt="">
        </my-product>
    </div>
    <!--为你推荐-->
    <!--尾部-->
    <div class="jd_footer">
        <ul class="clearfix">
            <li><a href=""><img src="images/a-home.png" alt=""></a></li>
            <li><a href=""><img src="images/n-cart.png" alt=""></a></li>
            <li><a href=""><img src="images/n-catergry.png" alt=""></a></li>
            <li><a href=""><img src="images/n-find.png" alt=""></a></li>
            <li><a href=""><img src="images/n-me.png" alt=""></a></li>
        </ul>
    </div>
</div>

<!--导航组件-->
<template id="my_nav">
    <div>
        <a href="">
          
            <img src="images/nav1.png">
            <p v-text = "titles"></p>
        </a>
    </div>
 
</template>
<!--匿名插槽模板-->
<template id="my_product">
    <div>
        <div>
            <span style="background-color: red ;text-align: center">" "</span>
            <span >京东产品</span>
        </div>
        <slot>可以替换任何标签，默认显示提示内容</slot>
    </div>
</template>


<script src="lib/vue.js"></script>
<script>
    /*注册组件*/
  var comNav = Vue.component('my-nav',{
       template:'#my_nav',
        props: ['titles', "imgs"],
    });
  var productCom = Vue.component('my-product',{
      template:'#my_product'
  }) ;
    /*创建vue实例*/
   new Vue({
       el:'#jd_app',
       data:{
           navListArr:[
               {img:"images/nav1.png",title:'京东超市'},
               {img:'images/nav2.png',title:'全球购'},
               {img:'images/nav3.png',title:'服装城'},
               {img:'images/nav4.png',title:'京东生鲜'},
               {img:'images/nav5.png',title:'京东到家'},
               {img:'images/nav6.png',title:'充值中心'},
               {img:'images/nav7.png',title:'惠赚钱'},
               {img:'images/nav8.png',title:'领券'},
               {img:'images/nav9.png',title:'我的分类'},
               {img:'images/nav10.png',title:'我的购物车'}
               ]
           ,
           productListArr : [
               {img:"images/nav1.png",htxt:'京东超市'},
               {img:'images/nav2.png',htxt:'爱生活'},
               {img:'images/nav3.png',htxt:'乐购'},
           ]
       },
       component:{
           'my-nav':comNav,
           'my-product':productCom
       }
       
       
   });
</script>
</body>
</html>